<template>
  <view class="news-item" @click="handleClick">
    <text class="title">{{ item.title }}</text>
    <text class="summary">{{ item.summary }}</text>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      required: true
    },
    onClick: {
      type: Function,
      required: true
    }
  },
  methods: {
    handleClick() {
      this.onClick(this.item.id);
    }
  }
};
</script>

<style scoped>
.news-item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  display: flex;
  flex-direction: column; /* 使内容垂直排列 */
}
.title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px; /* 为标题和摘要之间添加一些间距 */
}
.summary {
  font-size: 14px;
  color: #666;
}
</style>